<div class="top-navbar navbar navbar-default">
	<ul class="nav navbar-nav">
		<li ng-class="{active:nav.config=='grados'}"><a href=""
			ng-click="nav.config='grados'">Grados</a></li>
		<li ng-class="{active:nav.config=='materias'}"><a href=""
			ng-click="nav.config='materias'">Materias</a></li>
		<li ng-class="{active:nav.config=='materiasgrado'}"><a href=""
			ng-click="nav.config='materiasgrado'">Materias por grado</a></li>
	</ul>
</div>
<div ng-switch="nav.config">

	<div ng-switch-when="materiasgrado">
		<div class="form-group">
			<label>Grado:</label><select class="form-control"
				ng-model="$parent.grado" ng-change="$parent.actualizarMaterias()"
				ng-options="g.nombre for g in $parent.grados"></select>

		</div>
		<div ng-show="$parent.grado">
			<ep-pick-list options="materias"
				field-to-show="descripcion" right-title="Materias elegidas"
				left-title="Materias disponibles"
				on-change="onMateriaGradoChange(item,selected)"></ep-pick-list>
		</div>
	</div>

	<div ng-switch-when="materias">
		<input ng-model="filtroMateria">
		<button ep-open-modal="nueva-materia">Nueva Materia</button>

		<ul>
			<li ng-repeat="materia in materias | filter:filtroMateria"><span
				ng-bing="materia.nombre"></span><br> <span
				ng-bind="materia.descripcion"></span>
				<button ep-open-modal="edit-materia">editar</button></li>
		</ul>

	</div>

	<div ng-switch-when="grados">
		<input ng-model="filtroGrado">
		<button ep-open-modal="nuevo-grado">Nuevo Grado</button>
		<ul>
			<li ng-repeat="g in $parent.grados | filter:filtroGrado">{{g.nombre}}
				<button ep-open-modal="edit-grado">editar</button>
			</li>
		</ul>
	</div>
	<ep-modal-pane aceptar="crearMateria()" modal-id="nueva-materia"
		title="Nueva Materia">
	<div class="form-group">
		<label>Nombre</label> <input class="form-control" type="text"
			ng-model="nuevaMateria.nombre">
	</div>
	<div class="form-group">
		<label>Descripci&oacute;n</label> <input class="form-control"
			type="text" ng-model="nuevaMateria.descripcion">
	</div>
	</ep-modal-pane>
	<ep-modal-pane aceptar="crearGrado()" modal-id="nuevo-grado"
		title="Nuevo Grado">
	<div class="form-group">
		<label>Nombre</label> <input class="form-control" type="text"
			ng-model="nuevoGrado.nombre">
	</div>
	</ep-modal-pane>
</div>
